<template>
<q-page ref="VideoListPage" class="bg-grey-10" style="padding-top:36px" :style-fn="handleVideoPage">

    <q-splitter :value="splitterWidth" unit="px" :style="splitterStyle" separator-class="bg-grey-8">

        <template v-slot:before>

            <q-list dark class=" q-pa-sm ">
                <q-item v-for="item,index in fileList[0]" :key="index" clickable :active="selectedItem[0]==item.name" active-class="bg-teal-8 text-white" @click="handleItemClick(item,0)">
                    <q-item-section avatar>

                        <q-icon v-if="item.isDirectory" color="primary" name="mdi-folder-multiple-outline" />
                        <q-icon v-if="!item.isDirectory&&item.type=='video'" color="primary" name="mdi-movie-outline" />
                        <q-icon v-if="!item.isDirectory&&item.type=='img'" color="primary" name="mdi-image-outline" />
                        <q-icon v-if="!item.isDirectory&&item.type=='others'" color="primary" name="mdi-file-document-outline" />

                    </q-item-section>

                    <q-item-section>
                        <q-item-label>{{item.name}}</q-item-label>
                        <q-item-label caption>{{ item.info.ctime }} <span v-if="!item.isDirectory"> · {{(item.info.size/1024/1024).toFixed(2)+'MB'}}</span></q-item-label>
                    </q-item-section>
                    <q-item-section side>

                        <q-icon v-if="item.isDirectory" name="mdi-menu-right"></q-icon>
                        <q-icon v-else name="mdi-dots-horizontal"></q-icon>
                    </q-item-section>
                </q-item>
                <q-space></q-space>
            </q-list>

        </template>

        <template v-slot:after>
            <q-scroll-area class="fit" horizontal :horizontal-bar-style="{ borderRadius: '5px',
            backgroundColor: '#efefef59',

            color:'#027be3',
            opacity: 1}" :horizontal-thumb-style="{backgroundColor: '#009687',opacity:1,borderRadius:'5px'}">
                <q-splitter :value="splitterWidth" unit="px" v-if="fileList[1]" :style="splitterStyle" separator-class="bg-grey-8">

                    <template v-slot:before>
                        <q-list dark class=" q-pa-sm">
                            <q-item v-for="item,index in fileList[1]" :key="index" clickable :active="selectedItem[1]==item.name" active-class="bg-teal-8 text-white" @click="handleItemClick(item,1)">
                                <q-item-section avatar>

                                    <q-icon v-if="item.isDirectory" color="primary" name="mdi-folder-multiple-outline" />
                                    <q-icon v-if="!item.isDirectory&&item.type=='video'" color="primary" name="mdi-movie-outline" />
                                    <q-icon v-if="!item.isDirectory&&item.type=='img'" color="primary" name="mdi-image-outline" />
                                    <q-icon v-if="!item.isDirectory&&item.type=='others'" color="primary" name="mdi-file-document-outline" />

                                </q-item-section>

                                <q-item-section>
                                    <q-item-label>{{item.name}}</q-item-label>
                                    <q-item-label caption>{{ item.info.ctime }} <span v-if="!item.isDirectory"> · {{(item.info.size/1024/1024).toFixed(2)+'MB'}}</span></q-item-label>
                                </q-item-section>
                                <q-item-section side>

                                    <q-icon v-if="item.isDirectory" name="mdi-menu-right"></q-icon>
                                    <q-icon v-else name="mdi-dots-horizontal"></q-icon>
                                </q-item-section>
                            </q-item>
                        </q-list>
                    </template>

                    <template v-slot:after>
                        <q-splitter :value="splitterWidth" v-if="fileList[2]" unit="px" separator-class="bg-grey-8">

                            <template v-slot:before>
                                <q-list dark class=" q-pa-sm">
                                    <q-item v-for="item,index in fileList[2]" :key="index" clickable :active="selectedItem[2]==item.name" active-class="bg-teal-8 text-white" @click="handleItemClick(item,2)">
                                        <q-item-section avatar>

                                            <q-icon v-if="item.isDirectory" color="primary" name="mdi-folder-multiple-outline" />
                                            <q-icon v-if="!item.isDirectory&&item.type=='video'" color="primary" name="mdi-movie-outline" />
                                            <q-icon v-if="!item.isDirectory&&item.type=='img'" color="primary" name="mdi-image-outline" />
                                            <q-icon v-if="!item.isDirectory&&item.type=='others'" color="primary" name="mdi-file-document-outline" />

                                        </q-item-section>

                                        <q-item-section>
                                            <q-item-label>{{item.name}}</q-item-label>
                                            <q-item-label caption>{{ item.info.ctime }} <span v-if="!item.isDirectory"> · {{(item.info.size/1024/1024).toFixed(2)+'MB'}}</span></q-item-label>
                                        </q-item-section>
                                        <q-item-section side>

                                            <q-icon v-if="item.isDirectory" name="mdi-menu-right"></q-icon>
                                            <q-icon v-else name="mdi-dots-horizontal"></q-icon>
                                        </q-item-section>
                                    </q-item>
                                </q-list>
                            </template>

                            <template v-slot:after>
                                <q-splitter :value="splitterWidth" v-if="fileList[3]" unit="px" separator-class="bg-grey-8">

                                    <template v-slot:before>
                                        <q-list dark class=" q-pa-sm">
                                            <q-item v-for="item,index in fileList[3]" :key="index" clickable :active="selectedItem[3]==item.name" active-class="bg-teal-8 text-white" @click="handleItemClick(item,3)">
                                                <q-item-section avatar>

                                                    <q-icon v-if="item.isDirectory" color="primary" name="mdi-folder-multiple-outline" />
                                                    <q-icon v-if="!item.isDirectory&&item.type=='video'" color="primary" name="mdi-movie-outline" />
                                                    <q-icon v-if="!item.isDirectory&&item.type=='img'" color="primary" name="mdi-image-outline" />
                                                    <q-icon v-if="!item.isDirectory&&item.type=='others'" color="primary" name="mdi-file-document-outline" />

                                                </q-item-section>

                                                <q-item-section>
                                                    <q-item-label>{{item.name}}</q-item-label>
                                                    <q-item-label caption>{{ item.info.ctime }} <span v-if="!item.isDirectory"> · {{(item.info.size/1024/1024).toFixed(2)+'MB'}}</span></q-item-label>
                                                </q-item-section>
                                                <q-item-section side>

                                                    <q-icon v-if="item.isDirectory" name="mdi-menu-right"></q-icon>
                                                    <q-icon v-else name="mdi-dots-horizontal"></q-icon>
                                                </q-item-section>
                                            </q-item>
                                        </q-list>
                                    </template>

                                    <template v-slot:after>
                                        <q-splitter :value="splitterWidth" v-if="fileList[4]" unit="px" separator-class="bg-grey-8">

                                            <template v-slot:before>
                                                <q-list dark class=" q-pa-sm">
                                                    <q-item v-for="item,index in fileList[4]" :key="index" clickable :active="selectedItem[4]==item.name" active-class="bg-teal-8 text-white" @click="handleItemClick(item,4)">
                                                        <q-item-section avatar>

                                                            <q-icon v-if="item.isDirectory" color="primary" name="mdi-folder-multiple-outline" />
                                                            <q-icon v-if="!item.isDirectory&&item.type=='video'" color="primary" name="mdi-movie-outline" />
                                                            <q-icon v-if="!item.isDirectory&&item.type=='img'" color="primary" name="mdi-image-outline" />
                                                            <q-icon v-if="!item.isDirectory&&item.type=='others'" color="primary" name="mdi-file-document-outline" />

                                                        </q-item-section>

                                                        <q-item-section>
                                                            <q-item-label>{{item.name}}</q-item-label>
                                                            <q-item-label caption>{{ item.info.ctime }} <span v-if="!item.isDirectory"> · {{(item.info.size/1024/1024).toFixed(2)+'MB'}}</span></q-item-label>
                                                        </q-item-section>
                                                        <q-item-section side>

                                                            <q-icon v-if="item.isDirectory" name="mdi-menu-right"></q-icon>
                                                            <q-icon v-else name="mdi-dots-horizontal"></q-icon>
                                                        </q-item-section>
                                                    </q-item>
                                                </q-list>
                                            </template>

                                            <template v-slot:after>
                                                <q-splitter :value="splitterWidth" v-if="fileList[5]" unit="px" separator-class="bg-grey-8">

                                                    <template v-slot:before>
                                                        <q-list dark class=" q-pa-sm">
                                                            <q-item v-for="item,index in fileList[5]" :key="index" clickable :active="selectedItem[5]==item.name" active-class="bg-teal-8 text-white" @click="handleItemClick(item,5)">
                                                                <q-item-section avatar>

                                                                    <q-icon v-if="item.isDirectory" color="primary" name="mdi-folder-multiple-outline" />
                                                                    <q-icon v-if="!item.isDirectory&&item.type=='video'" color="primary" name="mdi-movie-outline" />
                                                                    <q-icon v-if="!item.isDirectory&&item.type=='img'" color="primary" name="mdi-image-outline" />
                                                                    <q-icon v-if="!item.isDirectory&&item.type=='others'" color="primary" name="mdi-file-document-outline" />

                                                                </q-item-section>

                                                                <q-item-section>
                                                                    <q-item-label>{{item.name}}</q-item-label>
                                                                    <q-item-label caption>{{ item.info.ctime }} <span v-if="!item.isDirectory"> · {{(item.info.size/1024/1024).toFixed(2)+'MB'}}</span></q-item-label>
                                                                </q-item-section>
                                                                <q-item-section side>

                                                                    <q-icon v-if="item.isDirectory" name="mdi-menu-right"></q-icon>
                                                                    <q-icon v-else name="mdi-dots-horizontal"></q-icon>
                                                                </q-item-section>
                                                            </q-item>
                                                        </q-list>
                                                    </template>

                                                    <template v-slot:after>
                                                        <q-splitter :value="splitterWidth" v-if="fileList[6]" unit="px" separator-class="bg-grey-8">

                                                            <template v-slot:before>
                                                                <q-list dark class=" q-pa-sm">
                                                                    <q-item v-for="item,index in fileList[6]" :key="index" clickable :active="selectedItem[5]==item.name" active-class="bg-teal-8 text-white" @click="handleItemClick(item,6)">
                                                                        <q-item-section avatar>

                                                                            <q-icon v-if="item.isDirectory" color="primary" name="mdi-folder-multiple-outline" />
                                                                            <q-icon v-if="!item.isDirectory&&item.type=='video'" color="primary" name="mdi-movie-outline" />
                                                                            <q-icon v-if="!item.isDirectory&&item.type=='img'" color="primary" name="mdi-image-outline" />
                                                                            <q-icon v-if="!item.isDirectory&&item.type=='others'" color="primary" name="mdi-file-document-outline" />

                                                                        </q-item-section>

                                                                        <q-item-section>
                                                                            <q-item-label>{{item.name}}</q-item-label>
                                                                            <q-item-label caption>{{ item.info.ctime }} <span v-if="!item.isDirectory"> · {{(item.info.size/1024/1024).toFixed(2)+'MB'}}</span></q-item-label>
                                                                        </q-item-section>
                                                                        <q-item-section side>

                                                                            <q-icon v-if="item.isDirectory" name="mdi-menu-right"></q-icon>
                                                                            <q-icon v-else name="mdi-dots-horizontal"></q-icon>
                                                                        </q-item-section>
                                                                    </q-item>
                                                                </q-list>
                                                            </template>

                                                            <template v-slot:after>

                                                            </template>

                                                        </q-splitter>
                                                    </template>

                                                </q-splitter>
                                            </template>

                                        </q-splitter>

                                    </template>

                                </q-splitter>

                            </template>

                        </q-splitter>
                    </template>

                </q-splitter>
            </q-scroll-area>

        </template>

    </q-splitter>

    <video-dialog :isVideoDialog="isVideoDialog" :url="videoUrl" @update="handleVideoDialog"></video-dialog>
    <q-dialog v-model="isImgDialog" :maximized="$q.platform.is.mobile" position="standard" transition-show="slide-up" transition-hide="slide-down">
        <q-layout view="hHh Lpr fFf" container class="bg-dark hide-scrollbar">
            <q-header class="bg-grey-10 shadow-7">

                <q-toolbar>
                    <q-toolbar-title>查看文件</q-toolbar-title>
                    <q-space />

                    <q-btn dense flat icon="close" @click="handleImg">
                    </q-btn>
                </q-toolbar>

            </q-header>
            <q-page-container>
                <q-page class="bg-dark row hide-scrollbar">

                    <q-img spinner-color="white" :src="imgUrl" contain>
                        <template v-slot:loading>
                            <div class="row flex-center">
                                <q-spinner-gears color="white" />
                                <div class="text-subtitle1 text-white">
                                    图片加载中...
                                </div>
                            </div>

                        </template></q-img>

                </q-page>
            </q-page-container>

        </q-layout>

    </q-dialog>

    <q-inner-loading :showing="isLoading" class="bg-grey-10">
      <q-spinner-cube
      color="primary"
      size="50px"
      class="q-mb-sm"
    />
      数据加载中……
  </q-inner-loading>
    <q-page-sticky expand position="top" class="items-start" style="height:36px">
        <q-tabs :breakpoint="100" v-model="tab" inline-label outside-arrows mobile-arrows indicator-color="transparent" align="left" dense class="bg-dark text-white shadow-2 full-width" @input="handleTab">
            <q-tab name="root" icon="home" label="02_源素材" />
            <div class="row item-center" v-for="item,index in tabList" :key="index">
                <span class="text-white row flex-center">/</span>

                <q-tab :name="item" :label="item" />
            </div>
        </q-tabs>
    </q-page-sticky>


</q-page>
</template>

<script>
import {
    loadNasVideoList,
    loadFolder
} from "assets/api/studio/nas"
import moment, {
    fn
} from "moment";
export default {
    name: 'VideolistPage',
    components: {
        VideoDialog: () => import('components/studio/VideoDialog.vue')
    },
    props: {
        user: {
            type: Object
        },
        isShow: {
            default: true
        }
    },
    data() {
        return {
          isLoading:true,
            tab: 'root',
            tabList: [],
            splitterWidth: 300,
            projectInfo: {},
            pid: '',
            fileList: [],
            rawRoot: '',
            root: '',
            isVideoDialog: false,
            videoUrl: '',
            isImgDialog: false,
            imgUrl: '',
            selectedItem: [],
            splitterStyle: {
                height: 0
            },

        };
    },
    beforeCreate(){
      if (this.$platform.inDesktop()) {

      } else {
          this.$router.replace('/m/videolist/' + this.$route.params.pid)
      }
    },
    created() {
        this.pid = this.$route.params.pid;



    },
    mounted() {
      this.projectInfo = this.$storage.getItem(this.pid);
      this.handleLoadVideoList();
    },
    beforeDestroy() {
        this.$q.loading.hide();
    },
    methods: {
        handleVideoPage(val, i) {
            this.splitterStyle.height = i - val - 36 + 'px';
            return {
                height: i - val + 'px'
            }

        },

        handleImg() {
            this.isImgDialog = false;
        },
        handleRoot(root) {
            let rootList = root.split('/');
            let newList = rootList.slice(3)
            console.log(rootList, newList);
            this.tabList = newList;
            this.tab = newList[newList.length - 1]
        },
        handleTab(val) {
            console.log(val);
            var vm = this;

            if (val == "root") {

                vm.handleLoadVideoList();
            } else {
                let tabList = this.tabList;
                let index = tabList.findIndex(i => i == val);
                if (index == 0) {
                    var path = this.rawRoot
                } else {
                    let dirPath = "";
                    for (var i = 0; i <= index - 1; i++) {
                        dirPath = dirPath + '/' + tabList[i]
                    }
                    var path = this.rawRoot + dirPath
                }

                console.log(path);
                this.handleLoadFolder(path, val)
            }
        },
        handleFileList(data) {
            this.$emit('update', data.length)
            data.forEach(item => {
                item.info.ctime = moment(item.info.ctimeMs).format('YYYY/MM/DD HH:mm')
                let extList = item.name.split('.')
                let ext = extList[extList.length - 1]
                if (['mp4', 'mov'].indexOf(ext.toLowerCase()) != -1) {
                    item.type = "video"
                } else if (['jpg'].indexOf(ext.toLowerCase()) != -1) {
                    item.type = "img"
                } else {
                    item.type = 'others'
                }
                console.log(item.info.ctime);

            });
            return data
        },
        handleLoadFolder(root, name, index) {

            console.log(index, this.tabList);
            if (index != this.tabList.length) {
                var newList = this.tabList.slice(0, index)
            } else {
                var newList = this.tabList
            }

            if (index == 0) {
                var newname = name;
            } else {
                var newname = newList.join("/") + '/' + name;
                console.log(newname);
            }

            loadFolder({
                root: root,
                name: newname
            }).then(res => {

                console.log(res);
                if (res.data.code == 1) {
                    let data = res.data.data;
                    // this.root = res.data.root;
                    this.handleRoot(res.data.root)
                    // if(index)
                    this.fileList.splice(index + 1, this.fileList.length - 1)

                    this.fileList.push(this.handleFileList(data))
                }
            })
        },
        handleVideoDialog(val) {
            if (val == 'close') {
                this.isVideoDialog = false
            }
        },
        handleItemClick(item, index) {
            console.log(item);
            this.selectedItem.splice(index, this.selectedItem.length)
            this.selectedItem.push(item.name)
            if (item.isDirectory) {
                this.handleLoadFolder(this.root, item.name, index)

            }
            if (item.type == 'video') {
                this.isVideoDialog = true;
                this.videoUrl = item.path;
            } else if (item.type == 'img') {
                this.isImgDialog = true;
                this.imgUrl = this.GLOBAL.serveurl + item.path;
            }
            if (!item.isDirectory && item.type == 'others') {
                this.$message.error('暂不支持预览该类型文件！')
            }
        },
        handleLoadVideoList() {

          console.log(this.projectInfo,'请求videolist');
            loadNasVideoList({
                pid: this.projectInfo.pid,
                project_id: this.projectInfo.project_id,
                name: this.projectInfo.name
            }).then(res => {
                console.log(res);
                this.isLoading=false
                if (res.data.code == 1) {
                    this.fileList = [];
                    let data = res.data.data;
                    this.root = res.data.root;
                    this.rawRoot = res.data.root;
                    this.handleRoot(res.data.root)

                    this.fileList.push(this.handleFileList(data));
                }
            })
        }
    }

};
</script>
